import React,{Component} from 'react'
import {connect} from 'react-redux'
import  * as actionCreate from './actionCreate.js'
import  {HeaderWrapper,Logo,Nav,NavItem,Navsearch,Addtion,Button} from './style'
class Header extends Component{
    render(){
        return (
        <HeaderWrapper>,
        <Logo></Logo>
        <Nav>
            <NavItem className="left active">首页</NavItem>
            <NavItem className="left">下载app</NavItem>
            <NavItem className="right">登录</NavItem>
            <NavItem className="right">Aa</NavItem>
            <Navsearch className={this.props.focused?'focused':'blur'} onFocus={this.props.handleInputFocus} onBlur={this.handleInputBlur}></Navsearch>
        </Nav>
        <Addtion>
            
            <Button className="writting">写文章</Button>
            <Button className="reg">注册</Button>
        </Addtion>
    </HeaderWrapper>
         )
    }
  


}

const mapStateToProps=(state)=>{
    return{
        focused:state.focused
    }
}
const mapDispathTprops = (dispath)=>{
    return{
        handleInputFocus(){
            // const action={
            //     type:'search_focus'
            // };

            dispath(actionCreate.searchFocus() );
        },
        handleInputBlur(){
            dispath(actionCreate.searchBlur() );

        }
    }
}
export default connect(mapStateToProps, mapDispathTprops)(Header)